<template>
  <div class="home">
    <br>
    <div class="bbb" style="background-color: white;height:70vh; padding: 20px; overflow-y: scroll;">
        <table class="box">
            <tr>
                <td></td>
                <td>权限名称</td>
                <td>路径</td>
                <td>权限等级</td>
            </tr>
            <tr v-for="x,i in qxlb" :key="i">
                <td style="width:60px;">{{ i+1 }}</td>
                <td >{{ x.authName }}</td>
                <td >{{ x.path }}</td>
                <td >
                    <span :style="x.color" class="dj">{{ x.dj }}</span>
                </td>
            </tr>
        </table>
    </div>
  </div>
</template>

<script>
import { qxhq } from '../../../request/api/roles/qxlb'
export default {
    data(){
        return{
            qxlb:[]
        }
        
    },
    created(){
        qxhq('list').then(res=>{
            this.qxlb=res.data.data
            this.qxlb.map(item=>{
                if(item.level==0){
                    item.dj='一级'
                    item.color='background-color:#ECF5FF;color:#52A6FF'
                }else if(item.level==1){
                    item.dj='二级'
                    item.color='background-color:#F0F9EB;color:#8BCE69'
                }else{
                    item.dj='三级'
                    item.color='background-color:#FDF6EC;color:#EAB054'     
                }
            })
            // for(let i=0;i<this.qxlb;i++){
            //     console.log(123);
            //     if(this.qxlb[i].level==0){
            //         this.qxlb[i].dj='一级'
            //     }else if(this.qxlb[i].level==1){
            //         this.qxlb[i].dj='二级'
                    
            //     }
            // }
            // console.log(this.qxlb);
        })
    },
    methods:{
    }
}
</script>

<style scoped>
    .bbb ::-webkit-scrollbar{
        display: none;
    }
    .box{
        width: 100%;
        border-collapse:collapse;
        overflow-y: scroll;
        border: 1px solid #000;
    }
    td{
        border: 1px solid #c0c0c0;
        padding-left: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        box-sizing: border-box;
    }
    .dj{
        display: inline-block;
        color: rgb(14, 7, 7);
        width: 55px;
        height: 35px;
        text-align: center;
        line-height: 30px;
        border-radius: 3px;
    }
</style>